<script setup>
import {reactive, ref, watch} from "vue";
import {ElMessage} from "element-plus";
import {UpdateUserPosition} from "@/api/index.js";

const ruleFormRef = ref();
let ruleForm = reactive({
  username: "",
  position: "",
  age: "",
  sex: "",
  mobile: "",
  email: "",
  address: "",
});
const rules = reactive({
  username: [
    {
      required: true,
      message: "请输入名称",
      trigger: "change",
    },
  ],
  position: [
    {
      required: true,
      message: "请输入职位",
      trigger: "change",
    },
  ],
  age: [
    {
      required: true,
      message: "请输入年龄",
      trigger: "change",
    },
  ],
  sex: [
    {
      required: true,
      message: "请选择性别",
      trigger: "change",
    },
  ],
  mobile: [
    {
      required: true,
      message: "请输入联系号码",
      trigger: "change",
    },
  ],
  email: [
    {
      required: true,
      message: "请输入邮箱",
      trigger: "change",
    },
  ],
  address: [
    {
      required: true,
      message: "请输入联系地址",
      trigger: "change",
    },
  ],

});
const SEX_TYPE = ["女", "男"];

// 职位选项
const POSITION_TYPE = [
  {
    id: 0,
    label: '校长',
  },
  {
    id: 1,
    label: '教导主任',
  },
  {
    id: 2,
    label: '普通老师',
  },
  {
    id: 3,
    label: '班主任',
  },

]
const props = defineProps({
  update_data: Object,
  handleRemoveUpdateTeacherPopup:Function
});
//监听props.update_data的变化
watch(
    () => props.update_data,
    (newVal) => {
      for (let i in ruleForm) {
        ruleForm[i] = newVal[i]
      }
      ruleForm.id = newVal.id
      ruleForm.position = newVal.userdetail.position
      ruleForm.age = newVal.userdetail.age
      ruleForm.sex = newVal.userdetail.sex
      ruleForm.mobile = newVal.userdetail.mobile
      ruleForm.address = newVal.userdetail.address
    }, { immediate: true }//在监听开始时立即执行一次
);

const handleUpdateUserPosition = async () => {
  try {
    const res = await UpdateUserPosition({
      id: ruleForm.id,
      position:ruleForm.position
    })
    if(res.status===201){
      ElMessage.success(res.msg)
      props.handleRemoveUpdateTeacherPopup(ruleForm.id, ruleForm.position)
    }else{
      ElMessage.error(res.msg)
      props.handleRemoveUpdateTeacherPopup()

    }
    ruleForm.position = ' '
  } catch (error) {
    console.log(error);
  }
}

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      handleUpdateUserPosition()
    }
  })
}

</script>

<template>
  <div class="update" v-if="ruleForm">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
      <el-form-item label="名称" prop="username">
        <el-input type="text" autocomplete="off" v-model="ruleForm.username" disabled />
      </el-form-item>

      <el-form-item label="职位" prop="position">
        <el-select v-model="ruleForm.position" class="m-2" placeholder="请选择职位">
          <el-option v-for="item in POSITION_TYPE" :key="item.id" :label="item.label" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input type="text" autocomplete="off" v-model="ruleForm.age" disabled />
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" disabled class="m-2" placeholder="请选择性别">
          <el-option v-for="(item, index) in SEX_TYPE" :key="index" :label="item" :value="index" />
        </el-select>
      </el-form-item>

      <el-form-item label="联系方式" prop="mobile">
        <el-input type="text" autocomplete="off" v-model="ruleForm.mobile" disabled />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input type="text" autocomplete="off" v-model="ruleForm.email" disabled />
      </el-form-item>

      <el-form-item label="联系地址" prop="address">
        <el-input type="text" autocomplete="off" v-model="ruleForm.address" disabled />
      </el-form-item>
      <el-form-item class="button">

        <el-button type="info" @click="submitForm(ruleFormRef)">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="less">
.update {
  width: 400px;
}

.el-form {
  width: 600px;
  margin-left: -20px;

  .button {
    margin-left: -30px;

    .el-button {
      width: 500px;
    }
  }
}
</style>